<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .slider-container {
    width: 500px;
    height: 350px;
    overflow: hidden;
    margin: 0 auto;
    position: relative;
  }

  .slider {
    width: 2000px;
    /* 图片数量乘以每张图片宽度 */
    height: 300px;
    display: flex;
    transition: transform 0.5s ease-in-out;

  }

  .slider img {
    width: 500px;
    height: 300px;

  }

  .prev-btn,
  .next-btn {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    background-color: transparent;
    border: none;
    color: white;
    font-size: 30px;
    z-index: 1;
    cursor: pointer;
  }

  .prev-btn {
    left: 10px;
  }

  .next-btn {
    right: 10px;
  }

  .slider-dots {
    position: absolute;
    top: 325px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
  }

  .dot {
    width: 10px;
    height: 10px;
    background-color: black;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
  }

  .active {
    background-color: red;
  }
</style>

<body>
  <div class="slider-container">
    <div class="slider">
      <img src="./01.jpeg">
      <img src="./02.jpeg">
      <img src="./03.jpeg">
      <img src="./04.jpeg">

    </div>
    <!-- &#10094;&#10095; -->
    <button class="prev-btn">&lt</button>
    <button class="next-btn">&gt</button>
    <div class="slider-dots">
      <span class="dot active"></span>
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
  </div>

</body>

</html>

<script>
  let slider = document.querySelector('.slider');
  let prevBtn = document.querySelector('.prev-btn');
  const nextBtn = document.querySelector('.next-btn');
  const dots = document.querySelectorAll('.dot');
  let count = 0;

  //定时器函数
  function slide() {
    count++;
    if (count > 3) {
      count = 0;
    }

    slider.style.transform = `translateX(-${count * 500}px)`; // 图片宽度乘以count的值

    updateDots();
  }

  //上一张
  function prevSlide() {
    count--;
    if (count < 0) {
      count = 3;
    }

    slider.style.transform = `translateX(-${count * 500}px)`; // 图片宽度乘以count的值

    updateDots();
  }

  //下一张
  function nextSlide() {
    count++;
    if (count > 3) {
      count = 0;
    }

    slider.style.transform = `translateX(-${count * 500}px)`; // 图片宽度乘以count的值

    updateDots();
  }

  //获取dot的位置
  function updateDots() {
    dots.forEach((dot, index) => {
      if (index === count) {
        dot.classList.add('active');
      } else {
        dot.classList.remove('active');
      }
    });
  }

  prevBtn.addEventListener('click', prevSlide);
  nextBtn.addEventListener('click', nextSlide);

  dots.forEach((dot, index) => {
    dot.addEventListener('click', () => {
      count = index;
      slider.style.transform = `translateX(-${count * 500}px)`; // 图片宽度乘以count的值
      updateDots();
    });
  });

  //setInterval(slide, 5000); // 每隔5秒自动切换


</script>
</body>

</html>